#{include file="../Common/Header.html"}
<style>
    .layui-layer-page .layui-layer-content {
        overflow-wrap: break-word;
    }

    .more-table td {
        border-width: 1px !important;
        border-style: solid !important;
        border-color: rgba(241, 195, 195, 0.27) !important;
    }
</style>
<div class="layui-container fly-marginTop fly-user-main">
    #{include file="../Common/Nav.html"}
    <div class="fly-panel fly-panel-user" pad20>
        <div class="layui-tab layui-tab-brief" lay-filter="user">
            <div class="content-header">
                <i class="layui-icon">&#xe638;</i> 商品订单
            </div>

            <div class="content-body">
                <form class="search-query"></form>

                <table id="order" lay-filter="order"></table>
            </div>
        </div>
    </div>
</div>


<div style="display: none" class="more-modal">
    <div style="padding: 10px;" class="more-table">
        <table class="layui-table">
            <tbody>
            <tr>
                <td colspan="2" style="text-align: center;"><img src="[avatar]"
                                                                 style="height: 80px;width:80px;border-radius: 100%;box-shadow: 1px 1px 10px 1px #ed9b9bb3;">
                </td>
            </tr>
            <tr>
                <td>下单用户</td>
                <td>[username]</td>
            </tr>
            <tr>
                <td>订单号</td>
                <td>[trade_no]</td>
            </tr>
            <tr>
                <td>金额</td>
                <td>[amount]</td>
            </tr>
            <tr>
                <td>商品</td>
                <td>[commodity]</td>
            </tr>
            <tr>
                <td>购卡数量</td>
                <td>[card_num]</td>
            </tr>
            <tr>
                <td>下单时间</td>
                <td>[create_time]</td>
            </tr>
            <tr>
                <td>下单设备</td>
                <td>[create_device]</td>
            </tr>
            <tr>
                <td>支付状态</td>
                <td>[status]</td>
            </tr>
            <tr>
                <td>支付时间</td>
                <td>[pay_time]</td>
            </tr>
            <tr>
                <td>发货状态</td>
                <td>[delivery_status]</td>
            </tr>
            <tr>
                <td>联系方式</td>
                <td>[contact]</td>
            </tr>

            <tr>
                <td>手续费</td>
                <td>[cost]</td>
            </tr>

            <tr>
                <td>控件</td>
                <td>[widget]</td>
            </tr>
            </tbody>
        </table>
    </div>

</div>

<script>
    $(function () {
        layui.use(['hex', 'form'], function () {
            let table = $("#order");
            let cao = layui.hex;
            let status = ['<span class="acg-badge acg-badge-light-red">未支付</span>', '<span class="acg-badge acg-badge-light-success">已支付</span>'];
            let delivery_status = ['<span style="color: red;">未发货</span>', '<span  style="color: green;">已发货</span>'];
            let delivery_way = ['<span style="color: green;">自动</span>', '<span style="color: red;">手动</span>'];
            let create_device = [
                'Windows',
                'Android',
                'IOS',
                'iPad'
            ];
            let contactType = ["", "[手机]", "[邮箱]", "[QQ]"];
            let queryParams = null;
            table.bootstrapTable({
                url: '/user/api/commodityOrder/data',//请求的url地址
                method: "post",//请求方式
                pageSize: 7,//每页显示的数量
                showRefresh: false,//是否显示刷新按钮
                cache: false,//是否使用缓存
                showToggle: false,//是否显示详细视图和列表视图的切换按钮
                cardView: false,
                pagination: true,//是否显示分页
                pageNumber: 1,//初始化显示第几页，默认第1页
                singleSelect: false,//复选框只能选择一条记录
                sidePagination: 'server',//分页显示方式，可以选择客户端和服务端（server|client）
                contentType: "application/x-www-form-urlencoded",//使用post请求时必须加上
                dataType: "json",//接收的数据类型
                queryParamsType: 'limit',//参数格式，发送标准的Restful类型的请求
                queryParams: function (params) {
                    params.page = (params.offset / params.limit) + 1;
                    if (queryParams) {
                        for (const key in params) {
                            queryParams[key] = params[key];
                        }
                    } else {
                        queryParams = params;
                    }
                    return queryParams;
                },
                //回调函数
                responseHandler: function (res) {
                    return {
                        "total": res.count,
                        "rows": res.data
                    }
                },
                columns: [
                    {
                        field: 'trade_no', title: '订单号', formatter: function (val, item) {
                            return '<span class="acg-badge acg-badge-light">' + item.trade_no + '</span>';
                        }
                    }
                    , {
                        field: 'commodity', title: '商品', formatter: function (val, item) {
                            if (!item.commodity) {
                                return "-";
                            }
                            return item.commodity.name;
                        }
                    }
                    , {
                        field: 'amount', title: '金额', formatter: function (val, item) {
                            return '<span class="acg-badge acg-badge-light-success">¥ ' + item.amount + '</span>';
                        }
                    }
                    , {
                        field: 'delivery_way', title: '发货方式', formatter: function (val, item) {
                            if (!item.commodity) {
                                return "-";
                            }
                            return delivery_way[item.commodity.delivery_way];
                        }
                    }
                    , {
                        field: 'create_time', title: '下单时间', width: 170
                    }
                    , {
                        field: 'status', title: '支付状态', formatter: function (val, item) {
                            return status[item.status];
                        }
                    }
                    , {
                        field: 'delivery_status', title: '发货状态', formatter: function (val, item) {

                            let html = delivery_status[item.delivery_status];

                            if (item.status == 1) {
                                html += (item.delivery_status == 0 && item.status == 1) ? " <a data-id='" + item.id + "' class='delivery-card-a' style='cursor: pointer;color: #0B7CC5;'>发货</a>" : " <a data-id='" + item.id + "' class='view-card-a' style='cursor: pointer;color: #0B7CC5;'>查看</a>";
                            }
                            return html;
                        },
                        events: {
                            'click .view-card-a': function (event, value, row, index) {
                                layer.open({
                                    type: 1,
                                    title: "查看卡密",
                                    area: cao.isPc() ? ['420px', '420px'] : ['100%', '100%'],
                                    content: '<textarea class="layui-input" style="padding: 15px;height: 100%;">' + row.secret + '</textarea>',
                                    shadeClose: true
                                });
                            },
                            'click .delivery-card-a': function (event, value, row, index) {
                                modal(row);
                            },
                        }
                    }
                    , {
                        field: 'cost', title: '手续费', formatter: function (val, item) {
                            return '<b style="color: #0B7CC5;">' + item.cost + '</b>';
                        }
                    }
                    , {
                        field: 'operate',
                        title: '',
                        formatter: function (val, item) {
                            return '<a  class="layui-badge layui-bg-gray more" style="cursor: pointer;"><i class="layui-icon" style="font-size: 12px;">&#xe65f;</i></a>';
                        },
                        events: {
                            'click .more': function (event, value, map, index) {

                                let deliveryHtml = delivery_status[map.delivery_status];
                                if (map.status == 1) {
                                    deliveryHtml += ((map.delivery_status == 0 && map.status == 1) ? " <a data-id='" + map.id + "' class='delivery-card' style='cursor: pointer;color: #0B7CC5;'>发货</a>" : " <a data-id='" + map.id + "' class='view-card' style='cursor: pointer;color: #0B7CC5;'>查看</a>");
                                }

                                let parse = JSON.parse(map.widget);

                                let widget = "";
                                if (parse) {
                                    for (const parseKey in parse) {
                                        widget += parse[parseKey].cn + "：" + parse[parseKey].value + "<br>";
                                    }
                                }


                                layer.open({
                                    type: 1,
                                    title: '<i class="layui-icon">&#xe600;</i> MORE',
                                    content: $('.more-modal').html()
                                        .replace("[trade_no]", map.trade_no)
                                        .replace("[amount]", '<b style="color: green;">¥ ' + map.amount + '</b>')
                                        .replace("[commodity]", map.commodity.name)
                                        .replace("[card_num]", map.card_num)
                                        .replace("[create_time]", map.create_time)
                                        .replace("[status]", status[map.status])
                                        .replace("[delivery_status]", deliveryHtml)
                                        .replace("[contact]", map.contact)
                                        .replace("[avatar]", map.owner ? map.owner.avatar : '/favicon.ico')
                                        .replace("[username]", map.owner ? map.owner.username : '访客')
                                        .replace("[cost]", '<b style="color: #40b0de;">' + map.cost + '</b>')
                                        .replace("[create_device]", create_device[map.create_device])
                                        .replace("[pay_time]", map.pay_time ? map.pay_time : "-")
                                        .replace("[widget]", widget)
                                    ,
                                    area: cao.isPc() ? "420px" : ['100%', '100%'],
                                    shadeClose: true,
                                    success: () => {
                                        $('.delivery-card').click(function () {
                                            let mapItem = cao.getMapItem(this);
                                            modal(mapItem);
                                        });

                                        $('.view-card').click(function () {
                                            let map = cao.getMapItem(this);
                                            layer.open({
                                                type: 1,
                                                title: "查看卡密",
                                                area: cao.isPc() ? ['420px', '420px'] : ['100%', '100%'],
                                                content: '<textarea class="layui-input" style="padding: 15px;height: 100%;">' + map.secret + '</textarea>',
                                                shadeClose: true
                                            });
                                        });
                                    }
                                });
                            }
                        }
                    }
                ]
            });

            let modal = (values = {}) => {
                cao.popup('/user/api/commodityOrder/delivery', [
                    {
                        title: "发货内容",
                        name: "secret",
                        type: "textarea",
                        placeholder: "手动发货的内容.."
                    }
                ], res => {
                    table.bootstrapTable('refresh', {silent: true});
                    layer.closeAll();
                }, values, "520px", false, "手动发货");
            }

            cao.query('.search-query', table, [
                {title: "订单号", name: "equal-trade_no", type: "input", width: 170},
                {title: "商品ID", name: "equal-commodity_id", type: "input", width: 170},
                {title: "卡密信息(模糊)", name: "search-secret", type: "input", width: 170},
                {title: "联系方式", name: "equal-contact", type: "input", width: 170},
                {
                    title: "支付状态", name: "equal-status", type: "select", dict: [
                        {id: 0, name: "未支付"},
                        {id: 1, name: "已支付"},
                    ], width: 170
                },
                {
                    title: "发货状态", name: "equal-delivery_status", type: "select", dict: [
                        {id: 0, name: "未发货"},
                        {id: 1, name: "已发货"},
                    ], width: 170
                },
                {title: "开始时间", name: "betweenStart-create_time", type: "date", width: 170},
                {title: "结束时间", name: "betweenEnd-create_time", type: "date", width: 170},
            ], true, false);
        });
    });
</script>
#{include file="../Common/Footer.html"}
